<script setup lang="ts">
// @ts-ignore
import { defineComponent, h, ref, Component, onMounted } from "vue";

import topTabs from "./topTabs.vue";
// @ts-ignore
import { NIcon, useMessage } from "naive-ui";
// @ts-ignore
import type { MenuOption } from "naive-ui";
//引入新建的pinia文件夹下index.js的模块
import { useRouteStore } from "../pinia/index";
import {
  Home,
  PersonCircleOutline,
  Megaphone,
  AmericanFootballSharp,
  // @ts-ignore
} from "@vicons/ionicons5";

const pinias = useRouteStore();
// 挂载消息提示
window.$message = useMessage();

// 图标渲染
function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

let collapsed = ref(false);
// 侧边栏
const menuOptions: MenuOption[] = [
  {
    whateverLabel: "首页",
    whateverKey: "index",
    icon: renderIcon(Home),
  },
  {
    whateverLabel: "微应用",
    whateverKey: "sonApp",
    icon: renderIcon(PersonCircleOutline),
    whateverChildren: [
      {
        whateverLabel: "第一个子应用",
        whateverKey: "app1",
        icon: renderIcon(Megaphone),
      },
      {
        whateverLabel: "第二个子应用",
        whateverKey: "app2",
        icon: renderIcon(AmericanFootballSharp),
      },
    ],
  },
];
// 点击事件
const sidebarSelect = (key: string, item: MenuOption) => {
  // 添加路由数组
  pinias.addRoute("/" + key, item.whateverLabel);
  // 更新当前路由
  pinias.updateUrl(item.whateverLabel);
  pinias.updateSidUrl(key);
};
</script>

<template>
  <n-layout has-sider>
    <n-layout-sider
      bordered
      collapse-mode="width"
      :collapsed-width="64"
      :width="200"
      :collapsed="collapsed"
      show-trigger
      @collapse="collapsed = true"
      @expand="collapsed = false"
    >
      <n-menu
        :value="pinias.sidRouteUrl"
        @update:value="sidebarSelect"
        :collapsed="collapsed"
        :collapsed-width="64"
        :collapsed-icon-size="22"
        :options="menuOptions"
        key-field="whateverKey"
        label-field="whateverLabel"
        children-field="whateverChildren"
      />
    </n-layout-sider>
    <div>
      <div style="padding: 0 15px">
        <topTabs />
      </div>
      <div
        class="sidContent"
        :style="{ width: collapsed ? 'calc(100vw - 100px)' : 'calc(100vw - 240px)' }"
      >
        <slot name="content"></slot>
      </div>
    </div>
  </n-layout>
</template>

<style lang="scss" scoped>
.sidContent {
  box-sizing: border-box;
  margin: 0 15px;
  height: calc(100vh - 60px);
  width: calc(100vw - 100px);
  // border: 1px solid;
  overflow: auto;
}

:deep(.n-submenu-children .n-menu-item-content) {
  padding-left: 44px !important;
}
</style>
